﻿/*.headroom--unpinned {top: -200px;opacity: 0;-webkit-transition: .25s;-o-transition: .25s;-moz-transition: .25s;-ms-transition: .25s;transition: .25s;-webkit-transform: translateY(-80px);-o-transform: translateY(-80px);-moz-transform: translateY(-80px);-ms-transform: translateY(-80px);transform: translateY(-80px)}
.headroom--pinned {top: 0;transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);-webkit-transition: .5s;-o-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;transition: .5s}*/

.picker-page img { width: 95%}



/*mpct*/
/*404*/
.notfound-content, .accessdeny-content, .fix-ing-content { min-height: 703px}
.notfound-content .img-404, .accessdeny-content .img-404, .fix-ing-content .img-404 { height: 470px; width: 550px}
/*404*/
/*composer*/
.choose option, .choose-lesson-plan option { color: white; background: #009688;text-overflow: ellipsis;white-space:nowrap}
.choose-lesson-plan { padding: 6.5px;width: 20%;border: none; outline: none; cursor: pointer}
.exam-pick { border-right: 2px solid #009688}
.test-list { height: 300px; overflow:auto}
.test-list ul li, .question-list ul li { cursor: pointer}
#loai1, #loai2, #loai3, #loai4 { height: 325px;overflow:auto}
.questions textarea, .questions input[type=text], .questions select{ color: black; padding: 0.5%}
.media-link { cursor:pointer; padding: 2% 1%}
.media-link span { font-weight:bold}
.media-content { height: 470px; overflow:auto}
.media-item { cursor:pointer; padding: 5px 15px}
.media-item span {font-weight:bold}
.media-box { height: 200px; margin-bottom:5px}
.media-item-content { max-width: 100%; max-height: 100%}
.media-sound-item { width: 100%}
.media-sound-item[poster] {width: 100%;height: 130px}
.media-upload-sound { width: 50%}
.media-option input[type=text] { padding:0.6%;width: 70%}
.load-more-btn { width: 150px}
/*Lesson plan*/
.lesson-part, .lesson-child-name, .themvidu-btn, .suavidu-btn, .xoavidu-btn { cursor:pointer}
.volca-table input[type=text] {width: 80%;padding:0.5%}
.volca-table tr {cursor:pointer}
.volca-table td:first-child,.volca-table th:first-child {padding-left:8px}
.lesson-child-content { display:none}
.lesson-child-content textarea { max-width: 100%}
.lesson-child-content textarea, .grammar-name input[type=text],.lesson-child-name input[type=text] { padding: 3px}
.listen-plan ul li a i, .conversation-plan ul li a i { padding: 2px}
.conversation-plan .conver-pic img { max-width: 100%; max-height: 500px }
.word-speak-btn, .word-speak-all-btn { font-size: 17px; width: 28.5px; text-align: center; padding: 6px 0; border-radius: 50%}
.inline-speak-all-btn {display: none}
/*grammar*/
.example-gram { cursor: pointer}
.hoithoai img { max-height: 350px; max-width: 100%}
/*multiple-choice*/
#lesson-list { width: 20%; min-width: 140px;display: none;position:absolute;height:735px;overflow:auto}
#lesson-list li a { width:100px}
.cer-content .cer-test-item {cursor:pointer;padding: 10px 5px}
.cer-content .cer-test-picture { height:125px;overflow:hidden}
.cer-content .cer-test-picture img {width:100%;height:100%}
.cer-content .cer-test-lock,.cer-content .cer-test-unlock {height:125px;padding-top:45px;background: rgba(0,0,0,0.5)}
.cer-content .cer-test-unlock {transform:translateY(125px);transition: all 0.3s;opacity:0}
.cer-content .cer-test-item:hover .cer-test-unlock {transform:translateY(0px);transition: all 0.3s;opacity:1}
.cer-content .cer-test-tittle { padding: 10px 5px 5px 5px;font-weight:bold}
.top-link {border-bottom:4px solid}
.top-content .top-user-list li img {width:50px;height:50px;margin:5px 10px 5px 0}
.top-content .top-user-list .top-type {}
.top-content .top-user-list .top-type img { height:50px;width:35px;margin-left:4px}
.select-cer-res {width:100%;padding:5px;background: #009688;color:white}
/*task*/
.task-content { overflow:auto;height:590px}
.submit-btn {  border: 2px solid white;width: 140px}
.question-content img { max-width: 100%; max-height: 300px}
.radio label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 13px }
.radio input[type=radio] { display: none }
.radio label:before { content: ""; display: inline-block; width: 15px; height: 15px; position: absolute; left: 0; bottom: 4px; background-color: lightgrey; border-radius: 8px }
.radio input[type=radio]:checked + label:before { content: "\2713"; color: #009688; font-size: 22px; font-weight: bold; text-align: center; line-height: 12.5px }
.checkbox label { display: inline-block; cursor: pointer; position: relative }
.checkbox input[type=checkbox] { display: none }
.checkbox label:before { content: ""; display: inline-block; width: 15px; height: 15px; position: absolute; left: 0; bottom: 4px; background-color: lightgrey }
.checkbox input[type=checkbox]:checked + label:before { content: "\2713"; color: #894129; font-size: 22px; font-weight: bold; text-align: center; line-height: 12.5px }
.the-answers { height: 631px; overflow:auto}
.the-results { height: 533px; overflow:auto}
.cau { margin: 1% auto}
.thutu, .answers { margin: 0 2px}
.pa-res { cursor:pointer}
.answers span, .pa .pa-res span { padding: 2px 4px;border:1px solid black; border-radius: 12px}
.indam { font-weight: bold}
/*edit info*/
/*staff*/
.staff-table td { padding: 0.8% 0.5%}
.staff-table .staff-img img { width: 50px;height:50px}
.option-btn i { font-size: 25px; cursor:pointer}
.nhapnhay { -moz-animation: fading 1s infinite; -webkit-animation:fading 1s infinite; animation:fading 1s infinite}
canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}

/*accountant*/
.accountantlink { font-weight:bold}
.accountant-select { padding: 6.5px;border:none;cursor:pointer}
.accountant-code { padding: 5px;text-transform: uppercase; display: none;border:none}
#filteryear, #filter-year { width: 90px}
.accountant-table { max-height: 600px;overflow:auto;padding: 0 5px}
.working-hour { max-height: 235px; overflow: auto}
.study-fee { max-height: 320px; overflow: auto}
.save-fee {max-height:150px;overflow:auto}
.study-pay-modal input[type=text], .study-pay-modal input[type=date], .study-pay-modal input[type=number] { outline: none;padding:0.9%}
.study-pay-modal select { outline:none;padding:1%}
#student-detail,#student-detail2 {display:none}
/*Letter*/
.letter-search-btn {padding:6.7px 8px}
.letter-option input[type=text] {padding:5px;width:90%;border:none;outline:none}
.letter-left {height:610px}
.letter-list {max-height: 567px;overflow:auto}
.letter-list-table tbody tr {cursor:pointer}
.letter-list-table tbody tr:hover {background: #c1c1c1}
.letter-detail {height: 516px;overflow:auto;transition: all 0.25s}
.letter-detail-row {padding: 4px 6px}
.letter-answer, .letter-send-btn {display:none}
/**/
/*Gallery*/
.gal-top {padding: 8px 25px; background: #f9f9f9; position: absolute; width: 100%}
.gal-view-type-btn {margin: auto 4px}
.gal-left { width: 250px; max-width: 350px}
.gal-middle {width:3px}
.gal-right {}
.gal-left-content, .gal-middle-resize, .gal-right-content {height:610px}
.gal-middle-resize {width: 100%; border-left: 1px solid lightgrey; cursor: col-resize}
.gal-right-blank, .gal-left-blank, .gal-middle-blank {padding: 14.2px 15px}
.gal-right-blank { width: 860px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position:relative}
.gal-title, .gal-link-sign {}
.gal-link-sign {width: 22px; text-align:center}
.gal-active {font-weight:bold}
.gal-right-content { display:none;overflow: auto}
.gal-right-content .fa { width: 25px;color: grey;text-align:center}
.gal-menu { list-style: none;margin-bottom: 0}
.gal-menu li a {padding: 8px 12px;display:block;cursor:pointer;color: darkslategray}
.gal-menu li a:hover { background: lightgrey}
.gal-menu li a .gal-menu-icon { width: 25px;color: grey}
.gal-menu li a .gal-show-folder-btn { width: 25px; text-align:center;color: grey;transition: all 0.1s}
.gal-sub-menu {display:none}
.gal-sub-menu li a {padding: 5px 12px}
.gal-menu-item-active {color:black; font-weight: bold}
.gal-menu-item-active::before {content:'';border-left: 4px solid #009688}
.gal-table-head tr { background: #f7f7f7; color: grey}
.gal-table-head .gal-table-sort-name {cursor:pointer}
.gal-table-head .gal-table-sort-name:hover {background: lightgrey}
.gal-table-head .fa {transition: all 0.5s}
.gal-table-sort-effect {-webkit-transform: rotateX(150deg);transform: rotateX(150deg)}
.gal-table-sort-active { font-weight: bold}
.gal-table-data {font-size: 13px}
.gal-table-data .fa {font-size: 15px; width: 25px; text-align: center; padding: 5px 0; border-radius: 50%; background: white}
.gal-table-data tr {border-bottom: 1px solid #efefef;cursor:pointer}
.gal-table-data tr:last-child {border-bottom: none}
.gal-table-name {width: 40%}
.gal-table-name img { max-width: 30px;max-height:30px;margin-right: 7.5px}
.gal-table-name .fa {margin-right: 15px}
.gal-table-date, .gal-table-modified { width: 23%}
.gal-table-options { width: 14%}
.gal-stop-audio-btn {display: none}
.gal-search-box { width: 980px;position:relative;z-index: 1}
.gal-search-input { padding: 6.1px;color:black;background: lightgrey;outline:none;border:none;width:94.5%;display:none}
.gal-close-search-btn {display:none}
.gal-folder-empty .fa { color: #bababa}
.gal-view-img-modal { padding: 30px}
.gal-view-img-content {min-width:100px;max-width: 600px;margin:auto;text-align:center;background:rgba(0,0,0,0.6)}
#gal-view-img-name,#gal-watch-video-name {color:white}
.gal-watch-video-modal {width: 853px;background: rgba(0,0,0,0.6)}
.gal-video-target {border:0;width:100%;height:480px}
.gal-close-modal-btn {background: rgba(0,0,0,0.6)}
.gal-link-copy {height:0px;border:0;position:absolute}
/*Gallery*/
/*FAQ manager*/
.admin-faq-left {height:655px}
.admin-faq-menu-list li { cursor:pointer}
.add-usual-ques-btn {cursor:pointer}
.add-usual-ques-content {display:none}
.add-usual-ques-content input[type=text] {border:0;outline:0;padding:4px}
.add-usual-ques-content label {padding-top: 4px}
/**/
/*Default-news*/
.news-fixed-top { position: fixed; top: 5px}
.news-fixed-menu { display:none; width: 15%}
.news-page { }
.news-tittle {}
.news-header {padding: 9px; font-size: 17px}
.news-search-box input[type=text]{border:0;padding:8px 0 3px 8px;outline:none}
.news-search-box a { padding: 8px}
ul.news-menu li { padding: 0}
ul.news-menu li a {width:100%; padding: 8px 8px 8px 28px}
.news-menu-item {text-transform:uppercase}
.news-menu-item:hover { color: black}
ul.news-menu li a.hvr-underline-reveal:before { background: #009688}
.news-cate-header { border-bottom: 2px solid;text-transform:uppercase}
.news-cate-header a { font-size: 17px; padding: 7.5px 25px}
.fb-page {width: 100%}
.news-newest-list li { padding: 5px 0; list-style:none; border-bottom: 1px solid lightgrey}
.news-newest-list li:last-child { border:none}
.news-newest-list-item { height: 65px}
.news-hotest-list-item:first-child { height: 220px}
.news-slide-up-box {position: relative; height: 230px; width: 290px; overflow: hidden}
.news-slide-up-content {width: 290px; height: 230px}
.news-hot-title { font-weight:bold}
.news-hotest-img { width: 100%; height: 70%}
.news-hot-img { width: 90px; height: 100%; margin-right: 4px; float: left}
.news-first-post, .news-post { height: 230px}
.news-first-post img { height: 100%;margin-bottom:4px}
.news-post img { width: 100%; height: 70%;margin-bottom: 1%}
.news-reading-tittle { padding: 10px 0; color: black; font-weight: bold}
.news-reading-detail { padding-bottom: 10px}
.news-poster { font-weight: bold}
.news-reading-preview { font-weight: bold; padding-bottom: 10px}
.news-reading-content { border-bottom: 1px dashed}
.news-reading-content .c1 {text-align:center}
.news-reading-content img {width: 100%;height:auto;margin: 10px auto}
.news-reading-like-share { padding: 10px}
.news-reading-tag { padding: 10px 0}
.news-big-slide > .item > img,
  .news-big-slide > .item > a > img {
      width: 100%;
      max-height: 555px;
      min-height: 210px;
      margin: auto;
  }
.news-small-slide > .item > img,
  .news-small-slide > .item > a > img {
      width: 100%;
      max-height: 330px;
      min-height: 210px;
      margin: auto;
  }
.slide-btn { padding: 5px 25px}
.slide-btn:hover {background: rgba(0, 150, 136, 0.8); transition: all 0.5s}
.carousel-caption { background: rgba(0, 150, 136, 0.8); padding: 0.5% 1% 2% 1%}
.carousel-caption a { color: white}
.carousel-indicators {bottom: 0; padding:0; margin-bottom: 0;z-index: 1}
.hvr-reveal:before { border-color: #009688}
/*news manager*/
.news-ad-select { padding: 6.5px;max-width: 60%}
.news-ad-list li { cursor: pointer}
.news-create-content { height: 545px; overflow: auto; padding: 10px}
.news-create-content select, .news-create-content input[type=text] { width:83%;color:black}
.news-create-content textarea { min-width:83%;max-width: 83%;color:black}
.news-create-content select { padding: 4px}
.news-create-content input[type=text], .news-create-content textarea { padding: 3px}
.news-create-content img { max-width: 83%}
.news-view-all-btn { width: 150px}
.circle-icon {-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;}
/*contact*/
.contact-tittle {text-transform: uppercase;position:relative;padding-bottom: 10px}
.contact-tittle:before { position: absolute;content: "";bottom: 0;right: inherit;width: 50px;height: 2px;background-color: #009688;left: 0}
.get-in-touch-form, .contact-info {margin: 20px auto}
.get-in-touch-form { border-top: 2px dashed #009688;padding-top:20px}
.get-in-touch-form input[type=text],.get-in-touch-form input[type=email],.get-in-touch-form select,.get-in-touch-form textarea {border:0}
.get-in-touch-form input[type=text],.get-in-touch-form input[type=email] {padding:7px}
.get-in-touch-form textarea {max-width:100%;resize:none}
.get-in-touch-form .captcha-img {height: 43px; width: 180px}
.renew-captcha-btn { font-size: 21px;margin-bottom: 25px;cursor:pointer}
.get-in-touch-form .khac {display:none}
.ggmap {width:100%;height:350px;border:0}
/*contact*/
/*lesson*/
.faq-area input[type=text] { padding: 2px;outline:none;border:0;border: 1px solid #e6e6e6;width:100%}
.faq-list {list-style:none;min-height:400px;max-height: 500px;overflow:auto}
.faq-list li {padding:5px}
.faq-avatar {width: 45px;text-align:center}
.faq-avatar img {height:40px;width:40px;margin-bottom:2px}
.faq-content {padding-left:5px;font-size: 12px;max-width: 310px;min-width:200px}
.faq-user {font-weight:bold}
.faq-action .dropdown { float:right;padding-right: 5px}
.faq-ghim-sign-hide {transform: translateY(-17px);opacity:0;transition: all 0.25s}
.faq-ghim-sign-show {transform: translateY(0px);opacity:1;transition: all 0.5s}
.faq-option-btn, .faq-icon-btn {cursor:pointer}
.faq-option-list { list-style:none}
.faq-option-list li {padding:0}
.faq-option-list li a {display:block;padding: 3px 15px}
.faq-option-list li a:hover {background:#009688;color:white}
.faq-icon-btn { margin-top: 9px}
.faq-icon-btn, .faq-unghim-btn, .faq-answer-content-edit, .faq-cancel-edit-answer-btn {display:none}
.faq-text-btn { padding-right: 10px;color:#009866;cursor:pointer;}
.faq-answer-list {list-style:none;border-left: 2px solid #009866}
.faq-answer-list li {padding: 0 3px 3px 3px}
.faq-answer-list li:last-child {border-bottom:none}
.faq-answer-avatar {width: 35px;text-align:center}
.faq-answer-avatar img {height:30px;width:30px;margin-bottom:2px}
.faq-answer-row,.faq-older-answer, .nut-an { display:none}
.faq-answer-input {padding-top:5px;padding-left:5px}
.faq-question-input {padding:5px}
.faq-question-action {background:white;margin:5px auto;padding:5px 0}
.faq-question-action input[type=text] {padding: 0 5px;width:280px;background:none;border:none;outline:none}
.usual-ques-btn { padding: 0px 10px; font-weight: bold}
.usual-ques-modal {width:500px}
.usual-ques-list {max-height:400px}
.usual-ques-item {cursor:pointer}
.usual-ques-answer {display:none}
/*Study-weekly*/
.study-weekly-btns {background: url('/Content/img/japan-river-background.jpg') no-repeat;background-size: cover;padding: 30px 0}
.study-weekly-btn { text-transform:uppercase;padding: 10px 20px}
/**/